<!-- xjx-back -->
<template>
	<view :class="color==='white'?'xjx-back-box white':'xjx-back-box black'">
		<view :style="{top: height}" v-if="!homeShow" @click="back" class="back-btn">
			<image v-if="color=='white'" src="@/static/images/icon-back-white.png" mode=""></image>
			<image v-else src="@/static/images/icon-back-black.png" mode=""></image>
		</view>
		<view :style="{top: height}" v-else-if="!backShow" @click="home" class="home-btn">
			<image v-if="color=='white'" src="@/static/images/icon-home-white.png" mode=""></image>
			<image v-else src="@/static/images/icon-home-black.png" mode=""></image>
		</view>
		<view :style="{top: height}" v-else class="btn-area">
			<view @click="back" class="left-btn">
				<image v-if="color=='white'" src="@/static/images/icon-back-white.png" mode=""></image>
				<image v-else src="@/static/images/icon-back-black.png" mode=""></image>
			</view>
			<view :class="color==='white'?'center-line white':'center-line black'"></view>
			<view @click="home" class="right-btn">
				<image v-if="color=='white'" src="@/static/images/icon-home-white.png" mode=""></image>
				<image v-else src="@/static/images/icon-home-black.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * back
	*/
	export default {
		name: 'XjxItem',
		props: {
			color: { // 按钮字体颜色
				type: String,
				default: 'white' // white/black
			},
			backShow: { // 是否显示返回按钮
				type: Boolean,
				default: true
			},
			homeShow: { // 是否显示返回首页按钮
				type: Boolean,
				default: false
			},
			needEmit: { // 是否自定义调用的function
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				height: '26px'
			}
		},
		mounted(){
			this.height = uni.getMenuButtonBoundingClientRect().top + 'px'
		},
		computed:{
			
		},
		methods:{
			back(){
				if(this.needEmit){
					this.$emit('backClick')
				}else{
					uni.navigateBack({
						delta: 1
					})
				}
			},
			home(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.xjx-back-box{
		&.white{
			&>view{
				background-color: rgba(0,0,0,.2);
				border: 1rpx solid rgba(255,255,255,.3);
			}
		}
		&.black{
			&>view{
				background-color: rgba(245,245,245,.9);
				border: 1rpx solid rgba(212,212,212,.3);
			}
		}
		.back-btn,.home-btn{
			z-index: 999;
			height: 64rpx;
			width: 64rpx;
			box-sizing: border-box;
			position: fixed;
			// top: 52rpx;
			left: 20rpx;
			z-index: 99;
			border-radius: 32rpx;
			line-height: 62rpx;
			text-align: center;
			image{
				width: 100%;
				height: 100%;
				vertical-align: middle;
			}
			&.home-btn{
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 41rpx;
					height: 40rpx;
				}
			}
		}
		.btn-area{
			z-index: 999;
			width: 174rpx;
			height: 64rpx;
			position: fixed;
			left: 12rpx;
			display: flex;
			flex-flow: row nowrap;
			align-items: stretch;
			border-radius: 32rpx;
			.left-btn,.right-btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50%;
				height: 100%;
				image{
					vertical-align: middle;
				}
			}
			.left-btn{
				image{
					width: 64rpx;
					height: 100%;
				}
			}
			.right-btn{
				image{
					width: 41rpx;
					height: 40rpx;
				}
			}
			.center-line{
				width: 1rpx;
				height: 36rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -18rpx;
				&.white{
					background-color: #E9E9E9;
				}
				&.black{
					background-color: black;
				}
			}
		}
	}
</style>
